<template>
  <div class="classification">
      <sonComponentsHeader title="分类管理"/>
      <div class="classification-box">
        <div class="classification-input">
          <search @inputChange="ev => searchVal = ev" @handleToEnter="handleToSearch"/>
          <el-button type="primary" icon="el-icon-search" @click="handleToSearch">搜索</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="handleToAdd">添加</el-button>
        </div>
        <classificationTable :listdata="listdata" @modifyFrom="handleEvent($event)" @refreshList="getListdata" @sortList="sortList($event)"/>
      </div>
      <addPop v-if="isShowAddpop" @closePop="closePop" @addPopToFile="getListdata" :title="fromTitle" :fromData="fromData"/>
  </div>
</template>

<script>
import sonComponentsHeader from '@/components/sonComponentsHeader'
import classificationTable from '@/components/classification/components/classificationTable'
import addPop from '@/components/classification/components/addPop'

export default {
    name: 'classification',
    components: {
        sonComponentsHeader,
        classificationTable,
        addPop
    },
    data(){
      return {
        searchVal: '', // 搜索框的value
        listdata: [], // 列表数据
        fromTitle: '', // 弹窗的标题
        isShowAddpop: false, // 是否打开弹窗
        fromData: {} // 传递给弹窗的数据
      }
    },
    methods: {
      //获取数据
      getListdata(){
        this.$http({
          method: 'get',
          url: '/backend/api/cate?page=1&limit=10',
        }).then(res => {
          this.listdata = res.data.data;
        })
      },

      //搜索数据
      handleToSearch(){
        this.$http({
          method: 'get',
          url: `/backend/api/cate?page=1&limit=10&keyword=${this.searchVal}`,
        }).then(res => {
          this.listdata = res.data.data
        })
      },

      // 子组件传递的数据
      handleEvent(ev){
        this.fromTitle = ev.title;
        this.fromData = ev.list;
        this.isShowAddpop = true;
      },

      //表格重新排序传递的数据
      sortList(ev){
        this.$http({
          method: 'post',
          url: '/backend/api/cate/sort',
          data: ev
        }).then(res => {
          this.listdata = [];
          this.getListdata();
          this.$message({
            message: '排序成功',
            type: 'success'
          });
        })
      },

      // 点击添加按钮
      handleToAdd(){
        this.fromTitle = '添加分类';
        this.isShowAddpop = true;
      },

      //关闭弹窗
      closePop(){
        this.fromData = {};//清空数据
        this.isShowAddpop = false;
      }
    },
    mounted(){
      this.getListdata()
    }
}
</script>

<style lang="scss" scoped>
.classification{
  display: flex;
  flex-flow:column nowrap ;
  height: 100%;
  overflow: hidden;

  .classification-box{
    flex: 1;
    padding: 20px;
    height: calc(100% - 50px);
    overflow: auto;
  }

  .classification-input{
    display: flex;
    margin-bottom: 20px;
    .el-button{
      margin-left: 10px;
    }
  }
}
</style>